<template>
  <div>
    <!-- 顶部 -->
    <chart-top :chartData="chartData"></chart-top>
    <!-- 中间 -->
    <chart-main :x="chartData.orderFullYearAxis"  :saleArr="chartData.orderFullYear" :visiteArr="chartData.userFullYear" :arr="chartData.orderRank" :arr1="chartData.userRank"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="chartData.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
import { reqChartsData } from "../../api/home/home";
//引入子组件
import ChartTop from "./ChartTop/index.vue";
import ChartMain from "./ChartMain/index.vue";
import ChartFooter from "./ChartFooter/index.vue";

//引入钩子
import { onMounted,ref } from "vue";
let chartData=ref({});
onMounted(async () => {
  let result = await reqChartsData();
  //
  chartData.value=result;
});
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, white, #ccc, white);
}
</style>